<div class="container">
    <div class="row">
        <div class="span5">
            <form class="form-horizontal" id='filter-article' onsubmit="return false;" method='post' action="<?php echo $this->url(); ?>">
                <fieldset>
                    <legend>Filter Article</legend>
                    <div class="control-group">
                        <div class="input-prepend">
                            <span class="add-on">Patterm</span>
                            <input id="" name="ptt-article" class="input-large" placeholder="" required="" type="text">
                        </div>
                    </div>
                    <div class="control-group"> 
                        <label class="radio" for="type_ptt-0">
                            <input name="type_ptt" id="type_ptt-0" value="split"  type="radio">
                            Split string
                        </label>
                        <label class="radio" for="type_ptt-1">
                            <input name="type_ptt" id="type_ptt-1" value="ptt" type="radio" checked='checked'>
                            ID/Class
                        </label>
                    </div>
                    <div class="control-group">
                        <button id="filter-article-submit" name="" class="btn btn-success">Filter</button>
                    </div>

                </fieldset>
            </form>
        </div>
        <div class="span7">
            <form class="form-horizontal" id='info-article'  action="<?php echo $this->url();?>" method="post">
                <fieldset>
                    <legend>Information Article</legend>
                    <div class="control-group">
                        <div class="input-prepend">
                            <span class="add-on">URLs</span>
                            <input id="url-content" name="url-article" class="input-xlarge" value='' placeholder="" required="" type="text">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="input-prepend">
                            <span class="add-on">Title</span>
                            <input id="title-article" name="title" class="input-xlarge" placeholder="" required="" type="text">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="input-prepend">
                            <span class="add-on">Address</span>
                            <input id="" name="address" class="input-xlarge" placeholder="" required="" type="text">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="input-prepend">
                            <span class="add-on">Hotline</span>
                            <input id="" name="hotline" class="input-xlarge" placeholder="" required="" type="text">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="input-prepend">
                            <span class="add-on">Website</span>
                            <input id="" name="website" class="input-xlarge" placeholder="" required="" type="text">
                        </div>
                    </div>


                    <div class="control-group">
                        <input type='submit' id="" name="" class="btn btn-info" value='Submit'/>
                        <input type='reset' id="" name="" class="btn btn-danger" value='Reset'/>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <div class="container" id='result-filter' style='display: block;text-align: center'>
        <img src='<?php echo $this->basePath() . '/img/loading.gif' ?>' class='loading' style='display: none'/>
    </div>
</div>
<script type='text/javascript'>
                $(document).ready(function() {
                    $('#filter-article-submit').click(function(e) {
                        var url = $('input[name="url-article"]').get(0).value;
                        var ptt = $('input[name="ptt-article"]').get(0).value;
                        var type = $('input[name="type_ptt"]:checked').val();

                        if (url !== '' && ptt !== '') {
                            $('img.loading').show();
                            $.ajax({
                                type: "POST",
                                url: "<?php echo $this->url(); ?>",
                                data: {url: url, ptt: ptt, type: type},
                                success: function(data) {
                                    $('img.loading').hide();
                                    $('#result-filter').html(data);
                                },
                                error: function() {

                                }
                            });
                        }
                    });
                });
</script>